<div class="wrapper-comp-settings is-active editor-with-buttons" id="settings-tab">
  <ul class="list-input settings-list">
    <li class="field comp-setting-entry is-set">
      <div class="wrapper-comp-setting">
        <label class="label setting-label" for="display_name">Component Display Name</label>
        <input class="input setting-input" name="display_name" id="display_name" value="{display_name}" type="text" />
      </div>
      <span class="tip setting-help">The name students see. This name appears in the course ribbon and as a header for the Oppia exploration.</span>
    </li>
    <li class="field comp-setting-entry is-set">
      <div class="wrapper-comp-setting">
        <label class="label setting-label" for="oppiaid">Oppia Exploration ID</label>
        <input class="input setting-input" name="oppiaid" id="oppiaid" value="{oppiaid}" type="text" />
      </div>
      <span class="tip setting-help">Example: a4j3jdj21tvv</span>
    </li>
    <li class="field comp-setting-entry is-set">
      <div class="wrapper-comp-setting">
        <label class="label setting-label" for="src">Oppia Server URL</label>
        <input class="input setting-input" name="src" id="src" value="{src}" type="text" />
      </div>
      <span class="tip setting-help">Example: https://www.oppia.org</span>
    </li>
  </ul>
  <div class="xblock-actions">
    <ul>
      <li class="action-item">
        <a href="#" class="button action-primary save-button">Save</a>
      </li>
      <li class="action-item">
        <a href="#" class="button cancel-button">Cancel</a>
      </li>
    </ul>
  </div>
</div>
